<template>
  <h2 style="text-align: center;">承运合同列表</h2><br>
  合同标题：<el-input v-model="form.contracTitle" style="width: 250px;height: 40px;" placeholder="请输入合同标题" clearable />
  外协单位：<el-input v-model="form.carrierUnit" style="width: 250px;height: 40px;" placeholder="请输入外协单位" clearable />
  外协负责人：<el-input v-model="form.carrierName" style="width: 250px;height: 40px;" placeholder="请输入外协负责人" clearable /> <br>
  <br>&nbsp;&nbsp;
  经办人：<el-input v-model="form.handlingName" style="width: 250px;height: 40px;" placeholder="请输入经办人" clearable />
  签订时间：<el-date-picker v-model="form.signedTime" style="width: 250px;height: 40px;" placeholder="请输入签订时间" type="date"
    value-format="YYYY-MM-DD" clearable />
  &nbsp;&nbsp;&nbsp;&nbsp;
  <el-button type="primary" @click="GetAll">查询</el-button>
  <el-button @click="Reset">重置</el-button>
  <br><br>
  <el-button type="primary" @click="PDel()">批量删除</el-button>
  <br><br>
  <el-scrollbar>
    <div align="center">
      <el-table :data="tableData" border style="width: 1800px">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="contractId" label="编号id" align="center" width="155" />
        <el-table-column prop="contractNumber" label="合同编号" align="center" width="155" />
        <el-table-column prop="contracTitle" label="合同标题" align="center" width="150" />
        <el-table-column prop="carrierUnit" label="外协单位" align="center" width="150" />
        <el-table-column prop="carrierName" label="外协负责人" align="center" width="150" />
        <el-table-column label="线路" align="center" width="150">
          <template v-slot="scope">
            <span>车线名称{{ scope.row.line }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="freight" label="吨运价" align="center" width="150" />
        <el-table-column prop="tonnage" label="包车条件吨位" align="center" width="150" />
        <el-table-column prop="charterAmount" label="包车金额" align="center" width="150" />
        <el-table-column prop="signedTime" label="签订日期" align="center" width="150">
          <template v-slot="scope">
            <span>{{ (scope.row.signedTime).substring(0, 10) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="handlingName" label="经办人" align="center" width="150" />
        <el-table-column prop="createDate" label="创建时间" align="center" width="150">
          <template v-slot="scope">
            <span>
              {{ (scope.row.createDate).substring(0, 10) + ' ' + (scope.row.createDate).substring(11, 16) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="contractAbnormalAlarms" label="异常报警状态" align="center" width="150">
          <template v-slot="scope">
            <span v-if="scope.row.contractShipmentStatus == 0">-</span>
            <span v-if="scope.row.contractShipmentStatus == 2">-</span>
            <el-tag type="success"
              v-if="scope.row.contractShipmentStatus == 1 && scope.row.contractAbnormalAlarms == 1">正常</el-tag>
            <el-tag type="danger"
              v-if="scope.row.contractShipmentStatus == 1 && scope.row.contractAbnormalAlarms == 2">异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="承运状态" align="center" width="150">
          <template v-slot="zt">
            <span v-if="zt.row.contractShipmentStatus == 0">未起运</span>
            <span v-if="zt.row.contractShipmentStatus == 1">运输中</span>
            <span v-if="zt.row.contractShipmentStatus == 2">已完成</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="300" align="center">
          <template v-slot="scope">
            <!-- 状态是运输中时显示删除、签收、在线跟踪 -->
            <el-button type="primary" text style="width: 15px;" v-if="scope.row.contractShipmentStatus == 1" disabled
              @click="Del(scope.row.contractId)">删除</el-button>
            <el-button type="primary" text style="width: 45px;" v-if="scope.row.contractShipmentStatus == 1"
              @click="UpdateState(scope.row.contractId, 0, 2)">签收</el-button>
            <el-button type="primary" text style="width: 45px;" v-if="scope.row.contractShipmentStatus == 1"
              @click="router.push('/ContractOfCarriageTracking?id=' + scope.row.contractId)">在线跟踪</el-button>
            <!-- 状态是未起运时显示删除、发货、定义线路-->
            <el-button type="primary" text style="width: 15px;" v-if="scope.row.contractShipmentStatus == 0"
              @click="Del(scope.row.contractId)">删除</el-button>
            <el-button type="primary" text style="width: 45px;" v-if="scope.row.contractShipmentStatus == 0"
              @click="UpdateState(scope.row.contractId, 1, 1)">发货</el-button>
            <el-button type="primary" text style="width: 45px;" v-if="scope.row.contractShipmentStatus == 0"
              @click="router.push('/DefinedRoute?id=' + scope.row.contractId)">定义线路</el-button>
            <!-- 状态是已完成时显示回单、跟踪记录 -->
            <el-button type="primary" text style="width: 45px;" v-if="scope.row.contractShipmentStatus == 2"
              @click="">回单</el-button>
            <el-button type="primary" text style="width: 45px;" v-if="scope.row.contractShipmentStatus == 2"
              @click="router.push('/TrackRecord?id=' + scope.row.contractId)">跟踪记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div><br>


    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[4, 8, 15]"
      prev-text="上一页" next-text="下一页" :background="true" layout="total, sizes, prev, pager, next, jumper"
      :total="form.pageRoot" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </el-scrollbar>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
const form = reactive({
  pageIndex: 1,
  pageSize: 4,
  classify: 3,
  pageRoot: 0,
  pageCount: 0,
  contracTitle: '',
  carrierName: '',
  carrierUnit: '',
  handlingName: '',
  signedTime: '',
  contractStatus: ''
})



onMounted(() => {
  GetAll()
  //枚举下拉框
  ContractStatus()
})
const tableData = ref([])
//承运合同列表ContractRead/api/ReadContract/GetAll
const GetAll = () => {
  axios.get('ContractRead/api/ContractCarriages/GetContractCarriages', {
    params: {
      pageIndex: form.pageIndex,
      pageSize: form.pageSize,
      classify: form.classify,
      contracTitle: form.contracTitle,
      carrierUnit: form.carrierUnit,
      carrierName: form.carrierName,
      handlingName: form.handlingName,
      signedTime: form.signedTime,
      contractStatus: form.contractStatus
    }
  }).then((ret) => {
    console.log(ret.data)
    tableData.value = ret.data.data.plist
    form.pageRoot = ret.data.data.pageRoot
    form.pageCount = ret.data.data.pageCount
  })
}


//修改状态
const UpdateState = (contractId: any, contractAbnormalAlarms: number, contractShipmentStatus: number) => {
  //跟踪记录
  GetContracted(contractId)
  axios.get("Contract/api/ContractCarriages/ContractCarriageUpdate", {
    params: {
      ContractId: contractId,
      ContractAbnormalAlarms: contractAbnormalAlarms,
      ContractShipmentStatus: contractShipmentStatus
    }
  }).then(res => {
    if (res.data.data > 0) {
      //跟踪记录
      if (contractAbnormalAlarms == 1) {
        AddShipmentsTrackRecord()
      } else {
        AddSignForTrackRecord()
      }

      ElMessage({
        message: '修改状态成功',
        type: 'success'
      })
      GetAll()
    } else {
      ElMessage
    }
  })

}
//分页
const handleSizeChange = (val: number) => {
  form.pageSize = val
  GetAll()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex = val
  GetAll()
}
//枚举下拉框
const Status: any = ref([])
const ContractStatus = () => {
  axios.get('ContractRead/api/ReadContract/ContractStatus',
  ).then((ret) => {
    console.log(ret.data)
    Status.value = ret.data
  })
}
const Checked = ref([]);
const handleSelectionChange = (val: any) => {
  Checked.value = val
  console.log(Checked.value);
}
//批量删除
const PDel = () => {
  let dd = Checked.value.map((x: any) => x.contractId)
  console.log(dd);
  axios.post(`Contract/api/Contract/BatchDelContracted`, { contractId: dd }).then((ret) => {
    console.log(ret.data)
    if (ret.data.data == 1) {
      ElMessage.success('批删成功')
      GetAll()
    } else {
      ElMessage.error('批删失败')
    }
  })
}
import { ElMessage, ElMessageBox } from 'element-plus';
//单删除
const Del = (contractId: any) => {
  ElMessageBox.confirm(
    '确定删除吗？?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.get('Contract/api/Contract/DeleteContracted?ContractId=' + contractId
      ).then((ret) => {
        console.log(ret.data)
        if (ret.data.data == 1) {
          ElMessage.success('删除成功')
          GetAll()
        } else {
          ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '取消',
      })
    })
}
//货主合同查看详情
const GetContractedinfo: any = ref({})
const GetContracted = (Id: number) => {
  axios.get('ContractRead/api/ReadContract/GetContracted', {
    params: {
      contractId: Id
    }
  }).then((ret) => {
    console.log(ret.data.data)
    GetContractedinfo.value = ret.data.data
    TRBackFillLine()
  })
}
//显示路线
const TRBackFillLinelist: any = ref([])
const TRBackFillLine = () => {
  axios.get('JiChuRead/api/Foundation/TRBackFillLine', {
    params: {
      lineName: GetContractedinfo.value.line
    }
  }).then((ret) => {
    console.log(ret.data.data)
    TRBackFillLinelist.value = ret.data.data[0]
  })
}

//跟踪记录(发货)
const ShipmentsTrackRecord = reactive({
  "contractNumber": "",
  "header": "货物已从【",
})
const AddShipmentsTrackRecord = () => {
  ShipmentsTrackRecord.contractNumber = GetContractedinfo.value.contractNumber;
  ShipmentsTrackRecord.header += TRBackFillLinelist.value.startingPoint + "】发货";
  axios.post('Contract/api/TrackRecord/AddShipmentsTrackRecord', ShipmentsTrackRecord).then((ret) => {
    console.log(ret.data.data)
  })
}


//跟踪记录(签收)
const SignForTrackRecord = reactive({
  "contractNumber": "",
  "header": "货物已被【",
  "consignee": "",
  "remark": "您的货物以安全送达",
})
const AddSignForTrackRecord = () => {
  SignForTrackRecord.contractNumber = GetContractedinfo.value.contractNumber;
  SignForTrackRecord.header += TRBackFillLinelist.value.terminal + "】收货";
  SignForTrackRecord.consignee = TRBackFillLinelist.value.terminal;
  axios.post('Contract/api/TrackRecord/AddSignForTrackRecord', SignForTrackRecord).then((ret) => {
    console.log(ret.data.data)
  })
}


//重置
const Reset = () => {
  form.contracTitle = '',
    form.carrierUnit = '',
    form.carrierName = '',
    form.handlingName = '',
    form.signedTime = '',
    form.contractStatus = ''
}
</script>

<style scoped></style>